<template>
    <div>
      <el-row style="height:180px;text-align: center;">
        <el-col :span="4" :xs="24" style="height:100%">
          <el-card  style="height:100%;font-size:14px;width:95%">
            <el-row style="font-size:20px;font-weight:bold;">
                        <span>
                            1#变压器
                        </span>
            </el-row>
            <div >
              <el-row style="margin-top: 8px;">
                <el-col :span="12" class="param-title">
                  <div>电压(U)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer1_v,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>电流(A)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer1_c,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>功率(P)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer1_p,2)}}
                  </el-tag>
                </el-col>
              </el-row>
<!--              <el-row style="margin-top: 5px;">-->
<!--                <el-col :span="12" class="param-title">-->
<!--                  <div>累积流量(m³/h)</div>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-tag style="width: 100%">-->
<!--                    {{decimal(realTimeData.st3_dqzg_lf,2)}}-->
<!--                  </el-tag>-->
<!--                </el-col>-->
<!--              </el-row>-->
            </div>


          </el-card>
        </el-col>
        <el-col :span="4" :xs="24" style="height:100%">
          <el-card  style="height:100%;font-size:14px;width:95%">
            <el-row style="font-size:20px;font-weight:bold;">
                        <span>
                            2#变频器
                        </span>
            </el-row>
            <div >
              <el-row style="margin-top: 8px;">
                <el-col :span="12" class="param-title">
                  <div>电压(U)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer2_v,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>电流(A)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer2_c,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>功率(P)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer2_p,2)}}
                  </el-tag>
                </el-col>
              </el-row>
<!--              <el-row style="margin-top: 8px;">-->
<!--                <el-col :span="12" class="param-title">-->
<!--                  <div>电压</div>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-tag style="width: 100%">-->
<!--                    {{decimal(realTimeData.st3_dhfzy_p,2)}}-->
<!--                  </el-tag>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row style="margin-top: 5px;">-->
<!--                <el-col :span="12" class="param-title">-->
<!--                  <div>温度(℃)</div>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-tag style="width: 100%">-->
<!--                    {{decimal(realTimeData.st3_dhfzy_t,2)}}-->
<!--                  </el-tag>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row style="margin-top: 5px;">-->
<!--                <el-col :span="12" class="param-title">-->
<!--                  <div>流量(m³/h)</div>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-tag style="width: 100%">-->
<!--                    {{decimal(realTimeData.st3_dhfzy_f,2)}}-->
<!--                  </el-tag>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row style="margin-top: 5px;">-->
<!--                <el-col :span="12" class="param-title">-->
<!--                  <div>累积流量(m³/h)</div>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-tag style="width: 100%">-->
<!--                    {{decimal(realTimeData.st3_dhfzy_lf,2)}}-->
<!--                  </el-tag>-->
<!--                </el-col>-->
<!--              </el-row>-->
            </div>


          </el-card>
        </el-col>
        <el-col :span="4" :xs="24" style="height:100%">
          <el-card  style="height:100%;font-size:14px;width:95%">
            <el-row style="font-size:20px;font-weight:bold;">
                        <span>
                             3#变频器
                        </span>
            </el-row>
            <div >
              <el-row style="margin-top: 8px;">
                <el-col :span="12" class="param-title">
                  <div>电压(U)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer3_v,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>电流(A)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer3_c,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>功率(P)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer3_p,2)}}
                  </el-tag>
                </el-col>
              </el-row>

            </div>


          </el-card>
        </el-col>
        <el-col :span="4" :xs="24" style="height:100%">
          <el-card  style="height:100%;font-size:14px;width:95%">
            <el-row style="font-size:20px;font-weight:bold;">
                        <span>
                            4#变频器
                        </span>
            </el-row>
            <div >
              <el-row style="margin-top: 8px;">
                <el-col :span="12" class="param-title">
                  <div>电压(U)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer4_v,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>电流(A)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer4_c,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>功率(P)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer4_p,2)}}
                  </el-tag>
                </el-col>
              </el-row>
            </div>


          </el-card>
        </el-col>
        <el-col :span="4" :xs="24" style="height:100%">
          <el-card  style="height:100%;font-size:14px;width:95%">
            <el-row style="font-size:20px;font-weight:bold;">
                        <span>
                           5#变频器
                        </span>
            </el-row>
            <div >
              <el-row style="margin-top: 8px;">
                <el-col :span="12" class="param-title">
                  <div>电压(U)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer5_v,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>电流(A)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer5_c,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>功率(P)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer5_p,2)}}
                  </el-tag>
                </el-col>
              </el-row>
            </div>


          </el-card>
        </el-col>
        <el-col :span="4" :xs="24" style="height:100%">
          <el-card  style="height:100%;font-size:14px;width:95%">
            <el-row style="font-size:20px;font-weight:bold;">
                        <span>
                            6#变频器
                        </span>
            </el-row>
            <div >
              <el-row style="margin-top: 8px;">
                <el-col :span="12" class="param-title">
                  <div>电压(U)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer6_v,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>电流(A)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer6_c,2)}}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px;">
                <el-col :span="12" class="param-title">
                  <div>功率(P)</div>
                </el-col>
                <el-col :span="12">
                  <el-tag style="width: 100%">
                    {{decimal(realTimeData.st3_transformer6_p,2)}}
                  </el-tag>
                </el-col>
              </el-row>
            </div>


          </el-card>
        </el-col>
      </el-row>

      <div ref="dayList" :style="{height:windowHeight*0.8*0.43+'px',width:'100%'}"></div>
      <div style="margin-top: 30px">
        <el-row :gutter="10" >
          <el-col :span="12">
            <div ref="monthList" :style="{height:windowHeight*0.8*0.43+'px',width:'100%'}"></div>
          </el-col>
          <el-col :span="12">
            <div ref="yearList" :style="{height:windowHeight*0.8*0.43+'px',width:'100%'}"></div>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>

  <script>
  import {getRealTimeInfo, getAreaPowerChart} from '@/api/app/energy/power'
    import * as echarts from 'echarts';
    export default {
      name: 'distributingCount',
      components: {
      },
      data() {
        return {
          windowWidth: document.documentElement.clientWidth, // 实时屏幕宽度
          windowHeight: document.documentElement.clientHeight,// 实时屏幕高度
          realTimeData: {
            st3_transformer1_v: 0,//电压
            st3_transformer1_c:0,//电流
            st3_transformer1_p: 0,//功率
            st3_transformer2_v: 0,//电压
            st3_transformer2_c:0,//电流
            st3_transformer2_p: 0,//功率
            st3_transformer3_v: 0,//电压
            st3_transformer3_c:0,//电流
            st3_transformer3_p: 0,//功率
            st3_transformer4_v: 0,//电压
            st3_transformer4_c:0,//电流
            st3_transformer4_p: 0,//功率
            st3_transformer5_v: 0,//电压
            st3_transformer5_c:0,//电流
            st3_transformer5_p: 0,//功率
            st3_transformer6_v: 0,//电压
            st3_transformer6_c:0,//电流
            st3_transformer6_p: 0,//功率

          },
          countList: [],
          dateRange1: [],
          echartDay: null,
          echartMonth: null,
          echartYear: null,
        }
      },
      mounted() {
        window.onresize = () => {
          return (() => {
            window.fullHeight = document.documentElement.clientHeight
            window.fullWidth = document.documentElement.clientWidth
            this.windowHeight = window.fullHeight // 高
            this.windowWidth = window.fullWidth // 宽
          })()
        }
        this.realTimeInfo()
        this.echartDay = echarts.init(this.$refs.dayList)
        this.echartMonth = echarts.init(this.$refs.monthList)
        this.echartYear = echarts.init(this.$refs.yearList)
        this.timer = setInterval(() => {
          this.realTimeInfo()
        }, 1000)
      },
      created() {
        this.getList()
      },
      beforeDestroy() {
        this.timer && clearInterval(this.timer)
        this.timer=null;
      },
      methods: {

        realTimeInfo(){
          getRealTimeInfo().then(res =>{
            this.realTimeData = res.data
          })
        },
        getList() {
          getAreaPowerChart().then(res => {
            let keys = Object.keys(res.data);
            let valuesData = Object.values(res.data);
            //日
            let x1 = [];
            let y11 = [];
            let y12 = [];
            let y13 = [];
            let y14 = [];
            let y15 = [];
            //月
            let x2 = [];
            let y21 = [];
            let y22 = [];
            let y23 = [];
            let y24 = [];
            let y25 = [];
            //年
            let x3 = [];
            let y31 = [];
            let y32 = [];
            let y33 = [];
            let y34 = [];
            let y35 = [];
            for(let i = 0; i < keys.length;i++){
              let dayValues = valuesData[i];
              if(keys[i] == "day"){
                for(let d = 0; d < dayValues.length;d++){
                  x1.push(dayValues[d].date);
                  y11.push(dayValues[d].area1);
                  y12.push(dayValues[d].area2);
                  y13.push(dayValues[d].area3);
                  y14.push(dayValues[d].total);
                  y15.push(dayValues[d].area4);
                }
              }else if(keys[i] == "month"){
                for(let m = 0; m < dayValues.length;m++){
                  x2.push(dayValues[m].date);
                  y21.push(dayValues[m].area1);
                  y22.push(dayValues[m].area2);
                  y23.push(dayValues[m].area3);
                  y24.push(dayValues[m].total);
                  y25.push(dayValues[m].area4);
                }
              }else if(keys[i] == "year"){
                for(let n = 0; n < dayValues.length;n++){
                  x3.push(dayValues[n].date);
                  y31.push(dayValues[n].area1);
                  y32.push(dayValues[n].area2);
                  y33.push(dayValues[n].area3);
                  y34.push(dayValues[n].total);
                  y35.push(dayValues[n].area4);
                }

              }
            }
            let optionDay = {
              title: {
                text: '日耗电量',
                x:'left',
                y: 'top',
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              toolbox: {
                feature: {
                  dataView: { show: true, readOnly: false },
                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
              },
              legend: {
                x: 'center',
                textStyle: {
                  fontWeight: 900
                },
                data: ['中心水泵房高压室', '精炼高压室', '炼钢本体高压室','3#水泵房高压室','总耗电量'],
                top: "0%"
              },
              grid: {
                bottom: "10%",
                left: "4%",
                right: "4%",
                top: "10%",
                width: "92%",
                calculable: true,
              },
              xAxis: [
                {
                  type: 'category',
                  data: x1,
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                },
                {
                  type: 'value',
                }
              ],
              series: [
                {
                  name: '中心水泵房高压室',
                  type: 'bar',
                  barWidth : '10%',
                  data: y11,
                },
                {
                  name: '精炼高压室',
                  type: 'bar',
                  barWidth :'10%',
                  data: y12,
                },
                {
                  name: '炼钢本体高压室',
                  type: 'bar',
                  barWidth : '10%',
                  data: y13,
                },
                {
                  name: '3#水泵房高压室',
                  type: 'bar',
                  barWidth : '10%',
                  data: y15,
                },
                {
                  name: '总耗电量',
                  type: 'line',
                  barWidth : '10%',
                  //是否显示右侧坐标系
                  // yAxisIndex: 1,
                  data: y14
                },
              ]
            }
            this.echartDay.setOption(optionDay)
            let optionMonth = {
              title: {
                text: '月耗电量',
                x:'left',
                y: 'top',
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              toolbox: {
                feature: {
                  dataView: { show: true, readOnly: false },
                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
              },
              legend: {
                x: 'center',
                textStyle: {
                  fontWeight: 900
                },
                data: ['中心水泵房高压室', '精炼高压室', '炼钢本体高压室','3#水泵房高压室','总耗电量'],
                top: "0%"
              },
              grid: {
                bottom: "10%",
                left: "4%",
                right: "4%",
                top: "10%",
                width: "92%",
                calculable: true,
              },
              xAxis: [
                {
                  type: 'category',
                  data: x2,
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                },
                {
                  type: 'value',
                }
              ],
              series: [
                {
                  name: '中心水泵房高压室',
                  type: 'bar',
                  barWidth : '10%',
                  data: y21,
                },
                {
                  name: '精炼高压室',
                  type: 'bar',
                  barWidth :'10%',
                  data: y22,
                },
                {
                  name: '炼钢本体高压室',
                  type: 'bar',
                  barWidth : '10%',
                  data: y23,
                },
                {
                  name: '3#水泵房高压室',
                  type: 'bar',
                  barWidth : '10%',
                  data: y25,
                },
                {
                  name: '总耗电量',
                  type: 'line',
                  barWidth : '10%',
                  data: y24
                },
              ]
            }
            this.echartMonth.setOption(optionMonth)
            let optionYear = {
              title: {
                text: '年耗电量',
                x:'left',
                y: 'top',
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              toolbox: {
                feature: {
                  dataView: { show: true, readOnly: false },
                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
              },
              legend: {
                x: 'center',
                textStyle: {
                  fontWeight: 900
                },
                data: ['中心水泵房高压室', '精炼高压室', '炼钢本体高压室','3#水泵房高压室','总耗电量'],
                top: "0%"
              },
              grid: {
                bottom: "10%",
                left: "4%",
                right: "4%",
                top: "10%",
                width: "92%",
                calculable: true,
              },
              xAxis: [
                {
                  type: 'category',
                  data: x3,
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                },
                {
                  type: 'value',
                }
              ],
              series: [
                {
                  name: '中心水泵房高压室',
                  type: 'bar',
                  barWidth : '10%',
                  data: y31,
                },
                {
                  name: '精炼高压室',
                  type: 'bar',
                  barWidth :'10%',
                  data: y32,
                },
                {
                  name: '炼钢本体高压室',
                  type: 'bar',
                  barWidth : '10%',
                  data: y33,
                },
                {
                  name: '3#水泵房高压室',
                  type: 'bar',
                  barWidth : '10%',
                  data: y35,
                },
                {
                  name: '总耗电量',
                  type: 'line',
                  barWidth : '10%',
                  data: y34
                },
              ]
            }
            this.echartYear.setOption(optionYear)
          })
        },
      }
    }
  </script>
